<template>
  <div class="container">
    <van-empty v-if="tabs.length === 0" description="暂无信息" />
    <template v-else>
      <div class="head-view">
        <div class="tab-view">
          <div
            class="tab"
            v-for="(tab, index) in tabs"
            :key="index"
            :class="index === active ? 'yxt-blue' : ''"
            @click="active = index"
          >
            {{ tab.title }} ({{ tab.count }})
            <div class="line" v-show="index < tabs.length - 1"></div>
          </div>
        </div>
        <div class="yxt-blue" @click="onClickDetail">对话详情</div>
      </div>

      <div class="session-view">
        <h4>客户关注点</h4>
        <p v-html="focus"></p>
        <h4>应对策略</h4>
        <p v-html="strategy"></p>
      </div>
    </template>
  </div>
</template>

<script>
import { useMinutesStore } from "@/store";
import { mapState, mapActions } from "pinia";
import { showToast } from "vant";

export default {
  name: "CompetitionSituation",
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    ...mapActions(useMinutesStore, {
      setPlayerTimeStampByRealTime: "setPlayerTimeStampByRealTime",
    }),
  },

  computed: {
    ...mapState(useMinutesStore, {
      competeInfo: "competeInfo",
    }),

    tabs() {
      return (
        this.competeInfo?.map((item) => ({
          title: item.competitor.commonName,
          count: item.count,
        })) || []
      );
    },

    currentInfo() {
      if (!this.competeInfo) return null;
      return this.competeInfo[this.active];
    },

    focus() {
      if (!this.currentInfo) {
        return "";
      }

      const competitorReport = this.currentInfo?.competitorReport.客户关注点;
      console.log("competitorReport: ", competitorReport);

      let mainFocus = competitorReport.主要关注方面;
      let latentNeed = competitorReport.潜在需求或痛点;
      let text = "";

      for (const key in mainFocus) {
        const value = mainFocus[key];
        text += `<b>${key}</b> : ${value} \n\n`;
      }
      text += "\n";
      for (const key in latentNeed) {
        const value = latentNeed[key];
        text += `<b>${key}</b> : ${value}\n\n`;
      }
      return text;
    },

    strategy() {
      if (!this.currentInfo) {
        return "";
      }
      const competitorReport = this.currentInfo.competitorReport;
      const tips = competitorReport.应对策略建议;
      let text = "";
      for (const tip of tips) {
        text += `<li>${tip}</li>`;
      }
      return text;
    },

    onClickDetail() {
      console.log("onClickDetail");
      if (!this.currentInfo) {
        showToast("未查询到相关信息");
        return null;
      }
      const competitorReport = this.currentInfo.competitorReport;
      const timeInfoArray = competitorReport?.竞品提及内容的详细分析 || [];
      if (timeInfoArray.length === 0) {
        showToast("时间戳信息为空");
        return;
      }
      const timeInfo = timeInfoArray[0];
      console.log("onClickDetail timeInfo", timeInfo);
      this.setPlayerTimeStampByRealTime(timeInfo.时间戳);
    },
  },
};
</script>

<style lang="less" scoped>
@import "./analysis.less";

.head-view {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
}

p {
  white-space: pre-wrap;
}
</style>
